<template>
  <div class="Myag-grega">
    <div class="grega">
      <p class="Service">
        <span class="Servi-e"
          ><img src="../../../img/shouye/组 28.png" alt=""
        /></span>
        对外数据接口服务情况
        <span class="Servi-e"
          ><img src="../../../img/shouye/组 27.png" alt=""
        /></span>
      </p>

      <div class="Total-hade">
        <div class="Total-number">
          <div class="of-interfaces">
            <p class="Total-nu">
              对外接口总量
              <span style="font-weight: 700; font-size: 32px; color: black">
                0</span
              >
              个
              <span class="Total-jin" style="font-size: 12px">
                今日新增 0 -</span
              >
              <!-- <img src="../../../img/shouye/向下.png" alt=""/> -->
            </p>
          </div>
          <div class="of-interfa">
            <p class="Total-nu">
              对外接口总量
              <span style="font-weight: 700; font-size: 32px; color: black">
                0</span
              >
              个
              <span class="Total-jin" style="font-size: 12px">
                今日新增 0 -</span
              >
            </p>
          </div>

          <div class="of-interfaces">
            <p class="Total-nu">
              对外接口总量
              <span style="font-weight: 700; font-size: 32px; color: black">
                0</span
              >
              个
              <span class="Total-jin" style="font-size: 12px">
                今日新增 0 -</span
              >
            </p>
          </div>
        </div>
        <div class="of-interf">
          <p
            class="oh-index"
            style="font-weight: 700; padding: 0 15px; background-color: #d5e7ff"
          >
            近一年接口调用总情况 <span style="float: right">单位： 次</span>
          </p>
          <div
            id="nu-mber"
            style="width: 100%; height: 240px; background-color: #f5faff"
          ></div>
        </div>
        <div class="Popular-interfaces">
          <p style="font-weight: 700">
            热门接口<span class="Interf">单位： 次</span>
          </p>

          <el-table
            :data="tableData"
            stripe
            border
            :cell-style="{ 'text-align': 'center' }"
            :header-cell-style="{
              background: '#C4DCFE',
              color: '#606266',
              'text-align': 'center',
            }"
            style="width: 100%"
          >
            <el-table-column prop="erial" label="序号" width="100">
            </el-table-column>
            <el-table-column prop="Interfacename" label="接口名称" width="170">
            </el-table-column>
            <el-table-column prop="Number" label="调用次数"> </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="Popular-interf">
        <p style="font-weight: 700">
          接口服务情况 <span class="Interf">单位： 次 </span>
        </p>
        <el-table
          :data="NumberData"
          stripe
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{
            background: '#C4DCFE',
            color: '#606266',
            'text-align': 'center',
          }"
          style="width: 100%"
        >
          border style="width: 100%">
          <el-table-column prop="eria" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="Service" label="接口名称" width="230">
          </el-table-column>
          <el-table-column prop="ofcalls" width="100" label="调用次数">
          </el-table-column>
          <el-table-column prop="services" label="主要服务接口">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  mounted() {
    this.initEchart();
  },
  data() {
    return {
      tableData: [
        {
          erial: "01",
          Interfacename: "-- --",
          Number: "0",
        },
        {
          erial: "02",
          Interfacename: "-- --",
          Number: "0",
        },
        {
          erial: "03",
          Interfacename: "-- --",
          Number: "0",
        },
        {
          erial: "04",
          Interfacename: "-- --",
          Number: "0",
        },
        {
          erial: "05",
          Interfacename: "-- --",
          Number: "0",
        },
      ],
      NumberData: [
        {
          eria: "01",
          Service: "-- --",
          ofcalls: "0",
          services: "-- -- --",
        },
        {
          eria: "02",
          Service: "-- --",
          ofcalls: "0",
          services: "-- -- --",
        },
        {
          eria: "03",
          Service: "-- --",
          ofcalls: "0",
          services: "-- -- --",
        },
        {
          eria: "04",
          Service: "-- --",
          ofcalls: "0",
          services: "-- -- --",
        },
        {
          eria: "05",
          Service: "-- --",
          ofcalls: "0",
          services: "-- -- --",
        },
      ],
    };
  },

  methods: {
    initEchart() {
      var myecart = echarts.init(document.getElementById("nu-mber"));
      myecart.setOption({
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2022.03",
            "2022.04",
            "2022.05",
            "2022.06",
            "2022.07",
            "2022.08",
            "2022.09",
            "2022.10",
            "2022.11",
            "2022.12",
            "2023.01",
            "2023.02",
          ],
        },
        grid: {
          bottom: 30,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            type: "line",
            smooth: true,
            areaStyle: {
              opacity: 0.3,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#014FE9",
                },
                {
                  offset: 1,
                  color: "#FFFFFF",
                },
              ]),
            },
          },
        ],
      });
    },
  },
};
</script>

<style>
.Myag-grega {
  background-image: url("../../../img/shouye/组 269.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

.grega {
  width: 1200px;
  margin: 0 auto;
  margin-top: 30px;

  height: 700px;
}

.Service {
  text-align: center;
  font-weight: 700;
  font-size: 24px;
  padding-top: 40px;
}

.Service img {
  vertical-align: middle;
}

.of-interfaces {
  width: 384px;
  height: 86px;
  background-color: #f4f9ff;
}

.of-interfa {
  margin: 10px 0;
  width: 384px;
  height: 86px;
  background-color: #f4f9ff;
}

.of-interf {
  width: 792px;
  height: 279.61px;
  background-color: #d5e7ff;
  float: right;
}

.Total-number {
  float: left;
}

.Total-nu {
  line-height: 86px;
  padding: 0 20px;
  color: #505e77;
}

.Total-hade {
  margin-top: 30px;
}

.Total-jin {
  line-height: 20px;
  display: inline-block;
  text-align: center;
  padding: 5px 7px;
  line-height: 24px;
  padding: 0 7px;
  border-radius: 4px;
  background-color: #ececec;
  font-size: 14px;
  color: #999999;
}

.Popular-interfaces {
  width: 384px;
  height: 100px;
  float: left;
  margin-top: 20px;
  /* background-color: rgb(230, 34, 34); */
}

.Popular-interf {
  width: 792px;
  height: 100px;
  margin-top: 20px;
  float: right;
  /* background-color: rgb(230, 34, 34); */
}

.Interf {
  float: right;
  font-size: 12px;
}

.oh-index {
  border: 1px solid #fff;
  line-height: 34px;
}
</style>
